<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { font-size:12px }
/* ######### ######### ######### BEGIN::Table List ######### ######### ######### */
table.category { border-collapse:collapse; border-spacing:0; border:0; }
table.category tbody{ border-top:2px solid #DDD; border-bottom:2px solid #DDD; }
table.category th, table.category td { white-space:nowrap; border:0; border-bottom:1px solid #DDD; padding:0.5em; } /* 全部禁止换行 */
table.category td.title, table.category td.list-title, table.category td.item-title { white-space:normal; width:100%; } /* 允许Title换行、撑开 */
table.category td.hits, table.category td.list-hits { text-align:right; }
table.category td p { margin:0.3em; }
table.category thead th { border:0; border-bottom:2px solid #E7E7E7; background:url(./img/bg_tbl_thead.gif); padding:0.7em 0.5em; } /* thead标题行高亮 */
/* LoVe/HAte(爱恨原则) */
table.category a:link, table.category a:visited, table.category a:hover, table.category a:active { color:#0075C8; text-decoration:none; }
table.category a:hover { text-decoration:underline; }
/* LoVe/HAte(爱恨原则) */
table.category thead th{color:#FFF;}
table.category thead th a:link, table.category thead th a:visited, table.category thead th a:hover, table.category thead th a:active { color:#FFF; text-decoration:none; }
table.category tr.odd, table.category .cat-list-row1 { background:#F7F7F7 url(./img/bg_tbl_odd.gif) repeat-x; }/* 斑马线 */
table.category ul.actions{display:inline-block;margin:0;padding:0;}
table.category ul.actions li{display:inline-block;}
/* ######### ######### ######### END::Table List ######### ######### ######### */
</style>
</head>
<body>
<blockquote>
  <p>！！！此处发现一个问题，只有一列的表格设置其td-&gt;width:100%;无效！</p>
</blockquote>
<h2>分类文章的列表式排版</h2>
<h3>http://demo.joomla.cn/using-joomla/extensions/components/content-component/article-category-list.html</h3>
<div class="cat-items">
  <form action="http://demo.joomla.cn/using-joomla/extensions/components/content-component/article-category-list.html" method="post" name="adminForm" id="adminForm">
    <fieldset class="filters">
      <div class="display-limit"> 每页显示数 #&#160;
        <select id="limit" name="limit" class="inputbox" size="1" onchange="this.form.submit()">
          <option value="5">5</option>
          <option value="10" selected="selected">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="25">25</option>
          <option value="30">30</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="0">全部</option>
        </select>
      </div>
      
      <!-- @TODO add hidden inputs -->
      <input type="hidden" name="filter_order" value="" />
      <input type="hidden" name="filter_order_Dir" value="" />
      <input type="hidden" name="limitstart" value="" />
    </fieldset>
    <table class="category">
      <thead>
        <tr>
          <th class="list-title" id="tableOrdering"> <a href="#" onclick="Joomla.tableOrdering('a.title','asc','');" title="点击根据此列排序">标题</a> </th>
          <th class="list-author" id="tableOrdering3"> <a href="#" onclick="Joomla.tableOrdering('author','asc','');" title="点击根据此列排序">作者</a> </th>
          <th class="list-hits" id="tableOrdering4"> <a href="#" onclick="Joomla.tableOrdering('a.hits','asc','');" title="点击根据此列排序">点击数</a> </th>
        </tr>
      </thead>
      <tbody>
        <tr class="cat-list-row0" >
          <td class="list-title"><a href="/the-joomla-community.html"> Joomla!社区</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 10 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="list-title"><a href="/the-joomla-project.html"> Joomla!项目</a></td>
          <td class="list-author"> 作者：Super User </td>
          <td class="list-hits"> 13 </td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="list-title"><a href="/using-joomla.html"> 使用Joomla!</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 27 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="list-title"><a href="/using-joomla/extensions/components/content-component/article-category-list/8-beginners.html"> 初级用户</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 26 </td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="list-title"><a href="/using-joomla/extensions/components/content-component/article-category-list/24-joomla.html"> 囧啦（Joomla）</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 17 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="list-title"><a href="/using-joomla/getting-help.html"> 寻求帮助</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 28 </td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="list-title"><a href="/getting-started.html"> 开始使用</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 13 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="list-title"><a href="/sample-sites.html"> 示范网站</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 75 </td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="list-title"><a href="/using-joomla/extensions/components/content-component/article-category-list/50-upgraders.html"> 进阶用户</a></td>
          <td class="list-author"> 作者：Super User </td>
          <td class="list-hits"> 22 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="list-title"><a href="/using-joomla/parameters.html"> 选项或参数设置</a></td>
          <td class="list-author"> 作者：Joomla! </td>
          <td class="list-hits"> 12 </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <p class="counter"> 第1页 共2页 </p>
      <ul>
        <li class="pagination-start"><span class="pagenav">首页</span></li>
        <li class="pagination-prev"><span class="pagenav">上页</span></li>
        <li><span class="pagenav">1</span></li>
        <li><a title="2" href="/using-joomla/extensions/components/content-component/article-category-list.html?start=10" class="pagenav">2</a></li>
        <li class="pagination-next"><a title="下页" href="/using-joomla/extensions/components/content-component/article-category-list.html?start=10" class="pagenav">下页</a></li>
        <li class="pagination-end"><a title="末页" href="/using-joomla/extensions/components/content-component/article-category-list.html?start=10" class="pagenav">末页</a></li>
      </ul>
    </div>
  </form>
</div>
<div class="cat-children">
  <h3> 子类列表 </h3>
  <ul>
    <li class="last"> <span class="item-title"><a href="/using-joomla/extensions/components/content-component/article-category-list/20-extensions.html"> 扩展</a> </span>
      <div class="category-desc">
        <p>作为内容管理系统的领头羊，Joomla能够让您通过使用扩展而创建出不同类型的网站。Joomla有5个基本类型的扩展：组件、模块、插件、模板和语言。现在这个网站包含了创建一个基本网站所需的各种扩展。但Joomla可用的扩展已经成千上万！全球最大的Joomla扩展库是<a href="http://extensions.joomla.org" style="color: #1b57b1; text-decoration: none; font-weight: normal;">Joomla扩展目录</a>。</p>
      </div>
    </li>
  </ul>
</div>
<hr />
<h2>某个友情链接分类</h2>
<h3>http://demo.joomla.cn/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html</h3>
<div class="weblink-category">
  <h2> Joomla相关链接</h2>
  <div class="category-desc">
    <div class="clr"></div>
  </div>
  <form action="http://demo.joomla.cn/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html" method="post" name="adminForm" id="adminForm">
    <table class="category">
      <tbody>
        <tr class="cat-list-row0" >
          <td class="title"><p> 友情链接 <a href="/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html?task=weblink.go&amp;id=1" class="category" rel="nofollow">Joomla!官网 </a> </p>
            <p>Joomla!的大本营</p></td>
          <td class="hits"> 4 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="title"><p> 友情链接 <a href="/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html?task=weblink.go&amp;id=5" class="category" rel="nofollow">Joomla官方论坛 </a> </p>
            <p>Joomla! Forums</p></td>
          <td class="hits"> 5 </td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="title"><p> 友情链接 <a href="/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html?task=weblink.go&amp;id=4" class="category" rel="nofollow">OpenSourceMatters </a> </p>
            <p>Home of OSM</p></td>
          <td class="hits"> 12 </td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="title"><p> 友情链接 <a href="/using-joomla/extensions/components/weblinks-component/weblinks-single-category.html?task=weblink.go&amp;id=10" class="category" rel="nofollow">囧啦!中国 </a> </p>
            <p>囧啦!中国始于2003年的Mambo.cn，为野马所创立。<a href="http://joomlacode.org/gf/project/jtranslation/" target="_blank">现任站长Derek和Johnathan为官方授权的翻译组负责人</a>，Johnathan同时还是<a href="http://joomlacode.org/gf/project/joomla/" target="_blank">Joomla!官方核心开发组成员</a>。Joomla简体中文翻译小组常年招募志愿者，<a href="http://www.joomla.cn/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=18" target="_blank">愿意加入的朋友可随时与我们联系。</a></p></td>
          <td class="hits"> 1 </td>
        </tr>
      </tbody>
    </table>
  </form>
  <div class="cat-children">
    <h3>子类列表</h3>
    <ul>
      <li class="last"> <span class="item-title"><a href="/using-joomla/extensions/components/weblinks-component/weblinks-single-category/33-other-resources.html"> 其它资源</a> </span> </li>
    </ul>
  </div>
</div>
<hr />
<h2>某部门</h2>
<h3>http://demo.joomla.cn/using-joomla/extensions/components/contact-component/contact-single-category.html</h3>
<div class="contact-category">
  <h2> 员工</h2>
  <div class="category-desc">
    <p>在您需要帮助的时候，请随时联系我们的工作人员。</p>
    <div class="clr"></div>
  </div>
  <form action="http://demo.joomla.cn/using-joomla/extensions/components/contact-component/contact-single-category.html" method="post" name="adminForm" id="adminForm">
    <table class="category">
      <thead>
        <tr>
          <th class="item-title"> <a href="#" onclick="Joomla.tableOrdering('a.name','asc','');" title="点击根据此列排序">姓名</a> </th>
          <th class="item-position"> <a href="#" onclick="Joomla.tableOrdering('a.con_position','asc','');" title="点击根据此列排序">职务</a> </th>
          <th class="item-phone"> 电话 </th>
          <th class="item-suburb"> <a href="#" onclick="Joomla.tableOrdering('a.suburb','asc','');" title="点击根据此列排序">市/县</a> </th>
          <th class="item-state"> <a href="#" onclick="Joomla.tableOrdering('a.state','asc','');" title="点击根据此列排序">省/自治区</a> </th>
          <th class="item-state"> <a href="#" onclick="Joomla.tableOrdering('a.country','asc','');" title="点击根据此列排序">国家/地区</a> </th>
        </tr>
      </thead>
      <tbody>
        <tr class="cat-list-row0" >
          <td class="item-title"><a href="/contact-us/4-buyer.html"> 采购员</a></td>
          <td class="item-position"></td>
          <td class="item-phone"></td>
          <td class="item-suburb"></td>
          <td class="item-state"></td>
          <td class="item-state"></td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="item-title"><a href="/contact-us/3-owner.html"> 店主</a></td>
          <td class="item-position"></td>
          <td class="item-phone"></td>
          <td class="item-suburb"></td>
          <td class="item-state"></td>
          <td class="item-state"></td>
        </tr>
      </tbody>
    </table>
    <div>
      <input type="hidden" name="filter_order" value="ordering" />
      <input type="hidden" name="filter_order_Dir" value="ASC" />
    </div>
  </form>
</div>
<hr />
<h2>自定义的联系人</h2>
<h3>http://demo.joomla.cn/using-joomla/extensions/components/contact-component/featured-contacts.html</h3>
<div class="blog-featured">
  <h1> 自定义的联系人 </h1>
  <form action="http://demo.joomla.cn/using-joomla/extensions/components/contact-component/featured-contacts.html" method="post" name="adminForm" id="adminForm">
    <fieldset class="filters">
      <legend class="hidelabeltxt">筛选</legend>
      <input type="hidden" name="filter_order" value="ordering" />
      <input type="hidden" name="filter_order_Dir" value="ASC" />
    </fieldset>
    <table class="category">
      <thead>
        <tr>
          <th class="item-num"> # </th>
          <th class="item-title"> <a href="#" onclick="Joomla.tableOrdering('a.name','asc','');" title="点击根据此列排序">姓名</a> </th>
          <th class="item-position"> <a href="#" onclick="Joomla.tableOrdering('a.con_position','asc','');" title="点击根据此列排序">职务</a> </th>
          <th class="item-phone"> 电话 </th>
          <th class="item-suburb"> <a href="#" onclick="Joomla.tableOrdering('a.suburb','asc','');" title="点击根据此列排序">市/县</a> </th>
          <th class="item-state"> <a href="#" onclick="Joomla.tableOrdering('a.state','asc','');" title="点击根据此列排序">省/自治区</a> </th>
          <th class="item-state"> <a href="#" onclick="Joomla.tableOrdering('a.country','asc','');" title="点击根据此列排序">国家/地区</a> </th>
        </tr>
      </thead>
      <tbody>
        <tr class="even">
          <td class="item-num"> 0 </td>
          <td class="item-title"><a href="/using-joomla/extensions/components/contact-component/single-contact.html"> 这是某联系人</a></td>
          <td class="item-position"> 市场部 </td>
          <td class="item-phone"> 0755-88250005 </td>
          <td class="item-suburb"> 深圳 </td>
          <td class="item-state"> 广东 </td>
          <td class="item-state"> 中国 </td>
        </tr>
        <tr class="odd">
          <td class="item-num"> 1 </td>
          <td class="item-title"><a href="/using-joomla/extensions/components/contact-component/contact-categories/34-park-site/2-webmaster.html"> 网站管理员</a></td>
          <td class="item-position"></td>
          <td class="item-phone"></td>
          <td class="item-suburb"></td>
          <td class="item-state"></td>
          <td class="item-state"></td>
        </tr>
        <tr class="even">
          <td class="item-num"> 2 </td>
          <td class="item-title"><a href="/using-joomla/extensions/components/contact-component/contact-categories/35-shop-site/8-shop-address.html"> 水果店地址</a></td>
          <td class="item-position"></td>
          <td class="item-phone"> 555-555-5555 </td>
          <td class="item-suburb"> Our City </td>
          <td class="item-state"> Our Province </td>
          <td class="item-state"> Our Country </td>
        </tr>
        <tr class="odd">
          <td class="item-num"> 3 </td>
          <td class="item-title"><a href="/contact-us/4-buyer.html"> 采购员</a></td>
          <td class="item-position"></td>
          <td class="item-phone"></td>
          <td class="item-suburb"></td>
          <td class="item-state"></td>
          <td class="item-state"></td>
        </tr>
        <tr class="even">
          <td class="item-num"> 4 </td>
          <td class="item-title"><a href="/contact-us/3-owner.html"> 店主</a></td>
          <td class="item-position"></td>
          <td class="item-phone"></td>
          <td class="item-suburb"></td>
          <td class="item-state"></td>
          <td class="item-state"></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
<hr />
<h2>某个新闻联播分类</h2>
<h3>http://demo.joomla.cn/using-joomla/extensions/components/news-feeds-component/news-feed-category.html</h3>
<div class="newsfeed-category">
  <h2> 示范新闻联播</h2>
  <div class="category-desc">
    <div class="clr"></div>
  </div>
  <form action="http://demo.joomla.cn/using-joomla/extensions/components/news-feeds-component/news-feed-category.html" method="post" name="adminForm" id="adminForm">
    <fieldset class="filters">
      <legend class="hidelabeltxt">筛选</legend>
      <div class="display-limit"> 每页显示数 #&#160;
        <select id="limit" name="limit" class="inputbox" size="1" onchange="this.form.submit()">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20" selected="selected">20</option>
          <option value="25">25</option>
          <option value="30">30</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="0">全部</option>
        </select>
      </div>
      <input type="hidden" name="filter_order" value="ordering" />
      <input type="hidden" name="filter_order_Dir" value="ASC" />
    </fieldset>
    <table class="category">
      <thead>
        <tr>
          <th class="item-title" id="tableOrdering"> <a href="#" onclick="Joomla.tableOrdering('a.name','asc','');" title="点击根据此列排序">新闻源名称</a> </th>
          <th class="item-link" id="tableOrdering3"> <a href="#" onclick="Joomla.tableOrdering('a.link','asc','');" title="点击根据此列排序">新闻源链接</a> </th>
        </tr>
      </thead>
      <tbody>
        <tr class="cat-list-row0" >
          <td class="item-title"><a href="/using-joomla/extensions/components/news-feeds-component/news-feed-category/1-joomla-announcements.html"> Joomla!公告</a></td>
          <td class="item-link"><a href="http://www.joomla.org/announcements.feed?type=rss">http://www.joomla.org/announcements.feed?type=rss</a></td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="item-title"><a href="/using-joomla/extensions/components/news-feeds-component/news-feed-category/3-joomla-security-news.html"> Joomla!安全新闻</a></td>
          <td class="item-link"><a href="http://feeds.joomla.org/JoomlaSecurityNews">http://feeds.joomla.org/JoomlaSecurityNews</a></td>
        </tr>
        <tr class="cat-list-row0" >
          <td class="item-title"><a href="/using-joomla/extensions/components/news-feeds-component/single-news-feed.html"> Joomla! Connect</a></td>
          <td class="item-link"><a href="http://feeds.joomla.org/JoomlaConnect">http://feeds.joomla.org/JoomlaConnect</a></td>
        </tr>
        <tr class="cat-list-row1" >
          <td class="item-title"><a href="/using-joomla/extensions/components/news-feeds-component/news-feed-category/2-new-joomla-extensions.html"> Joomla!新扩展</a></td>
          <td class="item-link"><a href="http://feeds.joomla.org/JoomlaExtensions">http://feeds.joomla.org/JoomlaExtensions</a></td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <p class="counter"> </p>
    </div>
  </form>
</div>
<hr />
<hr />
<hr />
<h3>其他设定结构</h3>
<div class="category-list">
  <h2> <span class="subheading-category">内容模块</span> </h2>
  <div class="category-desc">
    <p>内容模块通过内容组件显示文章和其它信息。</p>
    <div class="clr"></div>
  </div>
  <div class="cat-items">
    <form action="http://demo.joomla.cn/using-joomla/extensions/modules/content-modules.html" method="post" name="adminForm" id="adminForm">
      <table class="category">
        <tbody>
          <tr class="cat-list-row0" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/latest-articles.html"> 最新文章模块</a></td>
          </tr>
          <tr class="cat-list-row1" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/most-read.html"> 热门文章模块</a></td>
          </tr>
          <tr class="cat-list-row0" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/news-flash.html"> 新闻快讯模块</a></td>
          </tr>
          <tr class="cat-list-row1" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/related-items.html"> 相关文章模块</a></td>
          </tr>
          <tr class="cat-list-row0" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/archive.html"> 存档模块</a></td>
          </tr>
          <tr class="cat-list-row1" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/article-categories-view.html"> 所有文章分类模块</a></td>
          </tr>
          <tr class="cat-list-row0" >
            <td class="list-title"><a href="/using-joomla/extensions/modules/content-modules/article-category.html"> 分类文章模块</a></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>
</body>
</html>
